<div id = "form-content"  class="frmcontent frmxml">
    <div class="ti-tabs">
        <ul class="idTabs">
            <li><a class="selected" id="Tab01" title="DANH SÁCH" href="#Tab-01">DANH SÁCH</a></li>
            <li><a class="" id="Tab02" title="CẬP NHẬT" href="#Tab-02">CẬP NHẬT</a></li>
        </ul> 
        <div id="Tab-01" class="content" style="display: none;">
            <form id="frmsearch">
              <!-- Tieu chi tim kiem -->
                <div id="frm-search" class="frm">
                    <div>
                        <label class="" for="srecordtype">Loại thủ tục</label>
                        <select id="srecordtype" name="srecordtype" class="w450 normal">
                          <option value="">--- Chọn thủ tục ---</option>
                          <?= Clound_String::_generateSelectOption($this->TTHC,'Code','Code','Name',''); ?>
                        </select>
                        <label class="lb2" for="sform">Hình thức</label>
                        <select id="sform" name="sform" class="w250 normal">
                          <option value="">--- Chọn hình thức ---</option>
                          <?= Clound_String::_generateSelectOption(array(),'Code','Code','Name',''); ?>
                        </select>
                    </div>
                    <div>
                        <label class="" for="fromDate">Ngày nhập, Từ ngày</label>
                        <input id="fromDate" name="fromDate" class="normal" type="text" date="isdate" value="<?= '01/01/'.date('Y')?>" onkeyup="DateOnkeyup(this,event)">
                        <label class="lb2" for="toDate">Đến ngày</label>
                        <input id="toDate" name="toDate" class="normal" type="text" date="isdate" value="<?= date('d/m/Y')?>" onkeyup="DateOnkeyup(this,event)">
                        
                    </div>
                </div>
            </form>
                <div id="dsplist"></div>
                <div>
                    <div class="button-left">
                        <input type="button" id="refresh" name="refresh" value="Tìm kiếm" />
                    </div>
                    <div class="button-right">
                        <input type="button" id="addrow" name="addrow" value="Thêm mới" />
                        <input type="button" id="editrow" name="editrow" value="Sửa" />
                        <input type="button" id="deleterow" name="deleterow" value="Xóa" />
                        <input type="button" id="printrecord" name="printrecord" value="In hồ sơ" />
                    </div>
                </div>
                <div id="jqxWidget">
                    <div id="jqxgrid"></div>
                </div>

        </div>
        <div id="Tab-02" class="content" style="display: none;">
            <form>
                Màn hình sửa
            </form>
        </div>  
    </div>
</div>
<div id='ListMenu'>
    <ul>
        <li id="mn-add">Thêm mới</li>
        <li id="mn-edit">Sửa row đã chọn</li>
        <li id="mn-delete">Xóa row đã chọn</li>
        <li id="mn-print">In hồ sơ</li>
    </ul>
</div>
<!-- Modal In ho so -->
<div id ="dialog-print" title = "Chọn biểu mẫu in" class="dlpopup viewdep" loaded="0" style="display:none;">
    <a href="#" class="close sprited" id="close_x">close</a>
    <h1 class="" id="">Chọn các biểu mẫu để in</h1>
    <div id="templates" style="margin-top:15px;border-radius: 5px;background-color: #fff;"></div>
    <div style="padding-top: 10px; text-align: right;">
      <input type="button" id="prints" name="prints" value="In" />
    </div>
</div>
<!-- Thong bao in -->
<div class="vY nq" id = "multi-print" style="cursor: inherit;">
      <div id = "files">
          <div class = "file_export-title" title = "Tên file bao gồm ngày, tháng, năm, giờ, phút giây"></div>
          <div id="ctn">
            <div class="left">
                <a class = "file_export-icon doc"></a>
            </div>
            <div class="right">
                <ul style="min-height: 70px;" id="list-file">
                  <li><a>Biểu mẫu 1 Biểu mẫu 1</a></li>
                  <li><a>Biểu mẫu 1</a></li>
                  <li><a>Biểu mẫu 1</a></li>
                </ul>
            </div>
          </div>
          <p class = "file_export_close" onclick="export_close()"></p>
      </div>      
      <div id = "smallLoadIcon"></div>
</div>
<script type="text/javascript">
    var ajaxurl = baseUrl + '/ajax/openfile/';
    var dReceive = new Module_Receive({module: 'module', controller: 'receive'});
    var HINH_THUC = $.parseJSON('<?=$this->HINH_THUC;?>')
        ,QUAN_HUYEN = $.parseJSON('<?=$this->QUAN_HUYEN;?>')
        ,PHUONG_XA = $.parseJSON('<?=$this->PHUONG_XA;?>'); 
    dReceive.initialize();
    var objGrid = $('#jqxgrid');
    var columnsrenderer = function (value) {
        return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
    }
     $(function(){
        $(".idTabs").idTabs();
        // prepare the data
        var theme = 'energyblue';
        $('#listBoxgridpagerlistjqxgrid').remove();
        var source ={
              datatype: "json",
              datafields: [
                {name: 'RecordID', type: 'string'},
                {name: 'RecordType', type: 'string'},
                {name: 'Form', type: 'string'},
                {name: 'RegisterName', type: 'string'},
                {name: 'ResidenceAddress', type: 'string'},
                {name: 'CreateDate', type: 'date'},
                {name: 'RecordTypeCode', type: 'string'},
                {name: 'FormCode', type: 'string'},
              ],
              url: dReceive.urlPath + '/data',
              // id: 'ListtypeID',
              // root: 'Rows',
              cache: false,
              filter: function(){
                // update the grid and send a request to the server.
                $(objGrid).jqxGrid('updatebounddata', 'filter');
              },
              sort: function(){
                // update the grid and send a request to the server.
                $(objGrid).jqxGrid('updatebounddata', 'sort');
              },
              root: 'Rows',
              beforeprocessing: function(data){
                source.totalrecords = data[0].TotalRows;
              },
              deleterow: function(rowid, commit) {
                commit(true);
              },

        };
        var dataadapter = new $.jqx.dataAdapter(source, {
              loadError: function(xhr, status, error){
                  alert(error);
              },
              formatData: function (data) {
                $.extend(data, {
                    srecordtype: $('form#frmsearch #srecordtype').val(),
                    sform: $('form#frmsearch #sform').val(),
                    fromDate: $('form#frmsearch #fromDate').val(),
                    toDate: $('form#frmsearch #toDate').val(),
                });
                return data;
              }
            }
        );

        $(objGrid).on('bindingcomplete', function(event) {
            $(this).jqxGrid('localizestrings', dLayout._CONST.localizationobj);
             $(objGrid).jqxGrid("clearselection");
             $(objGrid).jqxGrid('expandallgroups');
          }).on("pagesizechanged", function (event){
            // var args = event.args; 
            // var pagenum = args.pagenum;
            // var oldpagesize = args.oldpagesize;
            // var pagesize = args.pagesize;
        }).on('rowclick', function(event) {
            if (event.args.rightclick) {
                  $(objGrid).jqxGrid('selectrow', event.args.rowindex);
                  var scrollTop = $(window).scrollTop();
                  var scrollLeft = $(window).scrollLeft();
                  contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
                  return false;
            }
        }).on('celldoubleclick', function (event) {
              $(objGrid).jqxGrid('selectrow', event.args.rowindex);
              $('#editrow').trigger('click');
        });

        // initialize jqxGrid
        $(objGrid).jqxGrid({
            source: dataadapter,
            theme: theme,
            filterable: false,
            showfilterrow: false,
            sortable: true,
            virtualmode: true,
            pagermode: "default",
            pagesizeoptions: ['15', '30', '50'],
            pageable: true,
            width: '100%',
            height: '425',
            autorowheight:true,
            autoheight: true,
            ready: function(){
            },
            rendergridrows: function(obj){
              return obj.data;
            },
            pagesize: 15,
            enablebrowserselection: true,
            selectionmode: 'multiplerowsextended',
            altrows: true,
			groupable: true,
			groups: ['RecordType'],			
            columns: [
                      {text: 'ID', datafield: 'RecordID', width: '3%', hidden: false, viewable: true, editrules: {edithidden: true},cellsalign: 'center',renderer: columnsrenderer},
                      {text: 'Loại thủ tục', datafield: 'RecordType', width: '20%', cellsalign: 'left',renderer: columnsrenderer},
                      {text: 'Hình thức', datafield: 'Form', width: '17%', cellsalign: 'left',renderer: columnsrenderer},
                      {text: 'Tên người kê khai', datafield: 'RegisterName', width: '20%', cellsalign: 'left',renderer: columnsrenderer},
                      {text: 'Địa chỉ thường trú', datafield: 'ResidenceAddress', width: '30%',renderer: columnsrenderer},
                      {text: 'Ngày nhập', datafield: 'CreateDate', cellsformat: 'dd-MM-yyyy', width: '10%', cellsalign: 'center',renderer: columnsrenderer},
                      // Hidden
                      {text: 'RecordTypeCode', datafield: 'RecordTypeCode', width: 1, hidden: true, viewable: true, editrules: {edithidden: false}},
                      {text: 'FormCode', datafield: 'FormCode', width: 1, hidden: true, viewable: true, editrules: {edithidden: false}},
                    ]
            });
    // create context menu
    // $('#menuWrapperListMenu').remove(); 
    $('.jqx-menu-wrapper').remove();
    // jqx-menu-wrapper
    var contextMenu = $("#ListMenu").jqxMenu({width: 200, height: 'auto', autoOpenPopup: false, mode: 'popup'});
    $(objGrid).on('contextmenu', function() {
          return false;
    });
    // handle context menu clicks.
    $("#ListMenu").on('itemclick', function(event) {
        var args = event.args;
        var rowindex = $(objGrid).jqxGrid('getselectedrowindex');
        switch($.trim($(args).attr('id'))){
          case 'mn-add':
            $('#addrow').trigger('click');
            break;
          case 'mn-edit':
            $(objGrid).jqxGrid('selectrow', rowindex);
            $('#editrow').trigger('click');
            break;
          case 'mn-delete':
            $('#deleterow').trigger('click');
            break;
        }        
    });
  });
</script>
